<template>
	<view class="page content-20 page-bg">
		<u-search shape="square" placeholder="输入病历号/主人手机号搜索" v-model="keyword" bg-color="#fff" 
		border-color="#64D987"
		:clearabled='true'
		@search='search'
		@custom='search'
		@clear='clear'
		></u-search>
		<view class="interval"></view>
		<view v-if="items.length <= 0" class="empty">
			<u-empty mode='list' text='还没有任何宠物资料~'></u-empty>
		</view>
		<view v-else class="item" v-for="item in items" :key='item.id'>
			<view class="item-box">
				<!-- <view class="icon-check">
					<u-icon name='checkmark-circle' size='60' color='#999'></u-icon>
					<u-icon name='checkmark-circle' size='60' color='#64D987'></u-icon>
				</view> -->
				<image  class="avatar item-img" :src="item.avatar" mode=""></image>
				<view class="item-info">
					<view class="title item-title">{{item.nickName}}({{item.varietiesView}})</view>
					<view class="item-desc">{{item.petColor}} | {{item.weight}}kg | {{common.petsSex[item.petSex]}}</view>
					<view class="item-desc recordNo">病历号： {{item.recordNo}}</view>
				</view>
				<view class="item-btn btn-theme" @click="$link('/pagesMine/doctorAddNews?id='+item.id)">去添加</view>
			</view>
		</view>
		
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
			return {
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
				common,
				keyword: ''
			}
		},
		
		onLoad() {
			this.pageSize = common.pageSize
			this.getItems()
		},
		
		methods: {
			getItems() {
				let {keyword, pageIndex, pageSize} = this.$data
				api.getAllPetList({keyword, pageIndex, pageSize}, (res) => {
					 this.totalCount = res.totalCount
					 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
					 let temp = res.items
					 if(this.pageIndex !== 1) {
					     temp = [...this.items, ...res.items]
					 }
					 this.items = temp
				}) 
			},
			
			search() {
				this.pageIndex = 1
				this.items = []
				this.getItems()
			},
			
			clear() {
				this.keyword = ''
				this.pageIndex = 1
				this.items = []
				this.getItems()
			},
			
			editPets(item) {
				common.setStorage('editPets', item)
				this.$link('/pagesMine/petsAdd?op=edit')
			}
		},
		
		onReachBottom() {
			if(this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			}else{
				this.pageIndex ++
				this.getItems()
			}
		},
		
		watch: {
			keyword: function() {
				if (this.keyword === '') {
					this.pageIndex = 1
					this.items = []
					this.getItems()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.item{
		margin-bottom: 20upx;
	}
	.empty{
		margin-top: 100px;
	}
	.item-desc{
		font-size: $font-size-26;
		color: #666666;
		line-height: 26upx;
		margin-top: 10upx;
	}
	.limit{
		margin-top: 30upx;
		padding-top: 30upx;
		border-top: 1px solid $border-color;
		@include flex-base;
		justify-content: space-between;
	}
	.limit-com{
		font-size: $font-size-26;
		color: #666666;
	}
	.theme{
		color: $theme-color;
	}
	.con{
		padding-right: 10upx;
	}
	.recordNo{
		margin-top: 20upx;
	}
</style>
